<template>
	<view class="login-wrap">
		<view class="login-header">
			<text>登录</text>
		</view>
		<view class="login-container">
			<view class="p30">
				<view class="group-bd">
					<view class="form-level d-s-c">
						<view class="d-s-c field-name">
							<!-- <text class="orange">*</text> -->
							<!-- <text class="gray3">手机号：</text> -->
							<view class="gray3">
								<image src="../../static/app/phone_icon.png" mode=""></image>
							</view>
						</view>
						<view class="val flex-1"><input type="number" v-model="formData.mobile"
								placeholder-class="placeholder-class" placeholder="输入手机号" :disabled="is_send" /></view>
					</view>
					<view class="form-level d-s-c">
						<view class="d-s-c field-name">
							<view class="gray3">
								<image src="../../static/app/phone_icon.png" mode=""></image>
							</view>
						</view>
						<view class="val flex-1"><input type="password" v-model="formData.password"
								placeholder-class="placeholder-class" placeholder="输入密码" /></view>
					</view>
					<!-- <view class="form-level d-s-c">
						<view class="d-s-c field-name">
							<text class="orange">*</text>
							<text class="gray3">验证码：</text>
							<view class="gray3">
								<image src="../../static/app/msm_icon.png" mode=""></image>
							</view>
						</view>
						<view class="val flex-1 d-b-c">
							<input class="flex-1" type="number" v-model="formData.code" placeholder-class="placeholder-class" placeholder="输入验证码" />
							<button class="get-code-btn" type="default" @click="sendCode" :disabled="is_send">{{ send_btn_txt }}</button>
						</view>
					</view> -->
				</view>
			</view>

			<view class="btns p30"><button type="default" @click="formSubmit">登录</button></view>
			<view class="btn-box">
				<view class="register-btn change-btn" @click="gotoChange()">忘记密码</view>
				<view class="register-btn" @click="gotoPage()">注册</view>

			</view>
		</view>
		<view class="bottom-tip">
			<view>
				<checkbox-group @change="staChange()">
					<checkbox value="cb" class="checkbox" :checked="status" />
				</checkbox-group>
			</view>
			<view>
				我已阅读并同意
			</view>
			<view class="tip-title" @click="msgshow">《个人信息保护及隐私政策》</view>
			<view class="msgagreem-item" v-if="msgShow">
				<view @click="close">
					<image src="../../static/app/close.png"></image>
				</view>
				<view class="msgagreem" v-html="msgagreem">
		
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*表单数据对象*/
				formData: {
					/*手机号*/
					mobile: '',
					password: '',
					/*验证码*/
					code: '',
				},
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: '获取验证码',
				/*当前秒数*/
				second: 60,
				ip: '',
				detail: '',
				msgShow: false, //协议显示
				status: false, //复选框的状态
				msgagreem: '', //协议
			};
		},
		onLoad() {
			let self = this;
			self.getmAgreement();
		},
		// onReady() {
		// 	let self = this;
		// 	if (uni.getStorageSync('token')) {
		// 		let classify = uni.getStorageSync('classify');
			
		// 		self._get('user.index/detail', {}, function(res) {
		// 			if (res.data.code == -1) {
			
		// 			} else {
		// 				if (classify == 2) {
		// 					uni.navigateTo({
		// 						url: '/pagesUser/home/home'
		// 					});
		// 				} else if (classify == 1) {
		// 					uni.navigateTo({
		// 						url: '/pages/home/home'
		// 					});
		// 				}
		// 			}
		// 		});
		// 	}
		// },
		methods: {
			/* 获取复选框的状态 */
			staChange() {
				this.status = !this.status;
				//console.log(this.status)
			},
			close() {
				this.msgShow = false;
			},
			/* 协议显示 */
			msgshow() {
				this.msgShow = true;
			},
			/* 获取协议*/
			getmAgreement() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('plus.article.article/detail', {
						article_id: 10013
					},
					function(res) {
						console.log(res);
						self.msgagreem = res.data.detail.article_content;
						uni.hideLoading();
					});
			},
			gotoChange() {
				uni.navigateTo({
					url: '/pages/chengePsw/chengePsw'
				});
			},
			gotoPage(e) {
				uni.navigateTo({
					url: '/register/register'
				});
			},
			/*提交*/
			formSubmit() {
				let self = this;
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.mobile)) {
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				// if (self.formData.code == '') {
				// 	uni.showToast({
				// 		title: '验证码不能为空！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				if (self.formData.password == '') {
					uni.showToast({
						title: '密码不能为空！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.status == false) {
					uni.showToast({
						title: '请勾选协议！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在提交'
				});
				// self._post('user.userweb/loginByPwd',
				// {
				// 	...self.formData
				// },
				// function(res){
				// 	uni.setStorageSync('token', res.data.token);
				// 	uni.setStorageSync('user_id', res.data.user_id);
				// 	uni.setStorageSync('classify', res.data.classify);
				// 	if(res.data.classify == 2){
				// 		uni.navigateTo({
				// 			url:'/pagesUser/home/home'
				// 		});
				// 	}else {
				// 		uni.navigateTo({
				// 			url:'/pages/home/home'
				// 		});
				// 	}
				// });
				self._post(
					'user.userweb/loginByPwd',
					self.formData,
					result => {
						// 记录token user_id
						uni.setStorageSync('token', result.data.token);
						uni.setStorageSync('user_id', result.data.user_id);
						uni.setStorageSync('classify', result.data.classify);
						if (result.data.classify == 2) {
							uni.navigateTo({
								url: '/pagesUser/home/home'
							});
						} else if (result.data.classify == 1) {
							uni.navigateTo({
								url: '/pages/home/home'
							});
						}
						//执行回调函数
						//uni.navigateBack();
						// uni.navigateTo({
						// 	url:'/pages/home/home'
						// });
					},
					false,
					() => {
						uni.hideLoading();
					}
				);
			},

			/*发送短信*/
			sendCode() {
				let self = this;

				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.mobile)) {
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				self._post(
					'user.userweb/sendCode', {
						mobile: self.formData.mobile,
					},
					result => {
						if (result.code == 1) {
							uni.showToast({
								title: '发送成功'
							});
							self.is_send = true;
							self.changeMsg();
						}
					}
				);
			},

			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.login-header {
		background-image: url(../../static/app/login_bg.png);
		background-size: cover;
		height: 300rpx;
		width: 100%;
		color: #ffffff;
		display: flex;
		align-items: flex-end;

		text {
			margin-bottom: 50rpx;
			margin-left: 20rpx;
			font-size: 36rpx;
		}
	}

	.login-container {
		background: #ffffff;
		margin-top: -20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.login-container input {
		height: 88rpx;
		line-height: 88rpx;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;
	}

	.wechatapp .header {
		width: 190rpx;
		height: 190rpx;
		border: 2px solid #fff;
		margin: 0rpx auto 0;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;
	}

	.login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #04be01;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.no-login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #dfdfdf;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.gray3 image {
		width: 50rpx;
		height: 50rpx;
	}

	.get-code-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 76rpx;
		padding: 0rpx 30rpx;
		// border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		color: $dominant-color;
		font-size: 30rpx;
		background-color: #ffffff;
		border-left: 1px solid #f7f7f7;
	}

	.get-code-btn[disabled='true'] {
		border: 1rpx solid #cccccc;
	}

	.btns button {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		background: $dominant-color;
		color: #ffffff;
	}

	.form-level {
		border-bottom: 1px solid #f1f1f1;
		margin-top: 40rpx;
	}

	.placeholder-class {
		color: #AAADB7;
	}

	.field-name {
		margin-right: 20rpx;
	}

	.btn-box {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.register-btn {
		color: $dominant-color;
		font-size: 28rpx;
		text-align: right;
	}

	.change-btn {
		text-align: left;
	}
	.bottom-tip{
		position: absolute;
		bottom: 30rpx;
		left: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		//margin: 20rpx;
		padding-bottom: 20rpx;
		.tip-title{
			color:$dominant-color;
		}
	}
	.msgagreem-item{
		width: 100%;
		margin: 0 auto;
		position: fixed;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		//padding: 20rpx;
		z-index: 999;
		overflow: auto;
		padding-top: 40rpx;
	}
	.msgagreem{
		width: 96%;
		padding: 0 20rpx;
		margin-top: 0rpx;
		
	}
	.msgagreem-item image{
		width: 40rpx;
		height: 40rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
		display: block;
	}
</style>
